// 第三个版本--总结：目前的轮播图不能作为插件使用的原因：
// 问题一：不能使用id（id要唯一），但是插件要重复使用，id冲突
// 问题二：作为插件使用，别人会引入这个js文件，还会引入自己的js文件，
//          变量名和函数名可能会命名一致，就会冲突了，特别像next，prev等常见的命名
// 问题三：class的值是prev和next，比较大众，容易冲突
// 问题四：文件命名上，基于jquery写的，文件名上带上，例如：jquery.slide.js

// 自运行匿名函数
(function($){
    var slide=function(ele,options){
        var $ele=$(ele);
        var settings={
            // 炸开时间
            speed:1000,
            // 自动轮播的时间
            interval:3000
        }
        // $.extend合并对象
        // 将options对象中的属性和值复制给settings
        $.extend(settings,options,true);
        // 设置所有li对应的位置信息
        var states = [{ZIndex: 1,width: 120,height: 150,top: 75,left: 100,ZOpacity: 0.2},
            {ZIndex: 2,width: 130,height: 170,top: 65,left: 50,ZOpacity: 0.45},
            {ZIndex: 3,width: 150,height: 200,top: 50,left: 140,ZOpacity: 0.7},
            {ZIndex: 4,width: 200,height: 300,top: 0,left: 275,ZOpacity: 1},
            {ZIndex: 3,width: 150,height: 200,top: 50,left: 460,ZOpacity: 0.7},
            {ZIndex: 2,width: 130,height: 170,top: 65,left: 565,ZOpacity: 0.45},
            {ZIndex: 1,width: 120,height: 150,top: 75,left: 450,ZOpacity: 0.2}
            ];
        
        var lis =$ele.find("li");
        move();
        // 展开所有的图片
        function move(){
            lis.each((index, item)=>{
        
                var state = states[index];
                $(item).css('z-index',state.ZIndex).finish().animate(state,settings.speed).find('img').css('opacity',state.ZOpacity)
            })
        }
        
        function prev(){
            states.push(states.shift());
            move();
        }
        function next(){
            states.unshift(states.pop());
            move();
        }
        // $('.L-slide .L-prev').click(prev);
        $ele.find('.L-prev').click(prev);
        // $('.L-slide .L-next').click(next);
        $ele.find('.L-next').click(next);
        
        // 自动播放
        var interval = null;
        autoPlay();
        function autoPlay(){
            // interval = setInterval(()=>{
            //     next();
            // },1000)
            interval = setInterval(next, settings.interval);
        }
        // 鼠标移入暂停
        var btns =  $ele.find('section');
        lis.add(btns).hover(function(){
            clearInterval(interval);
        },autoPlay);
    }

    $.fn.Lslide=function(options){
        // console.log(this);
        this.each((index,item)=>{
            slide(item,options);
        });
        return this;
    }
}(jQuery));


// jquery实现插件
// 方式一：
// 使用插件类
// $.fn.customFun = function(){}
// 使用: $(selector).customFun();

// 方法二：工具类
// $.customFun = function(){}
// 使用：$.customFun();

// $(function(){
//     console.log("自运行函数");
// });

// 自运行匿名函数
// 闭包的理解
// 作用域： 1.全局域，2.函数域（局部域）， 3.块级作用域（block域）
// 1.全局域：页面打开---》页面关闭
// 2.函数域：函数被调用一瞬间（也不一定，要考虑闭包）

// 闭包的形成条件：函数套用函数（）
// 闭包作用：保留函数作用域（）
// （像prev方法中使用move方法，move使用了states变量，move和states是slide变量）

// 全局域会产生闭包吗？
// 不会，因为变量在全局域中